Toast Notification Element

The Toast Notification Element allows a notification popup to be configured which will display a message at runtime when an event has finished or an action has been completed. The Toast Element can be linked to any event or action for which the JavaScript can be customised.

Once the JavaScript for an event or action has been accessed, the Toast Element can be linked to it by adding a single line of code:

 

NDLLibrary.showToast(form1.page1.ndltoast1.htmlId);

 

In the above syntax (and for the project you are configuring), form1 will be the name of the form within which the Toast Element appears; page1 is the name of the page on which the Toast Element has been placed; and ndltoast1 is the name of the Toast Element as it appears in the Properties pane. The htmlId is a fixed (non-variable) code element and won't need changing.

In the below example, the Toast Element code has been placed inside the JavaScript for a Submit button, and appears at the bottom of the function block just before the closing bracket:

 

function Page1_ndlsubmitbutton1_success(ndlParams)

{

ndlParams.requestParams = ""; //initialise the requestParams field

ndlParams.tablename = "Form1"; //name the table

NDLRuntime.prepareDatasource("ElementsTest","Form1"); //read the values from the elements into the current record

ndlParams.data = NDLDSElementsTest.form1.getCurrent(); //assign the current record to the ndlParams.data object

NDLDSElementsTest.updateDatasource(ndlParams); //call updateDatasource - the response is asynchronous

NDLLibrary.showToast(form1.page1.ndltoast1.htmlId);

}

Once you have placed a Toast Element on a page, you can edit the Element's properties to configure the Element for your requirements. Select the Element on the page to display its properties in the Properties Pane.

The following properties are available:

Name and Code Name

 

Visible and Disabled Properties

 

Title

Allows a Title for the notification to be configured.

 

Content

Allows the message that will appear within the notification box to be configured.

 

Position

Allows a position for the notification popup to be chosen (e.g., Top Left, Bottom Right etc.). When Custom is selected from the position drop-down, the X and Y co-ordinates for the top and left-hand side of the notification box can be configured - see below.

 

X Position

Used in conjunction with the Custom position setting, this allows a percentage value to be set for the X (horizontal) axis. The value can be entered manually, or the up and down arrows alongside the property box can be used to increase or decrease the percentage. For example, if 30 is entered for the X Position value, the left-hand side of the Toast notification box will appear 30% in from the left of the screen at form runtime. If 50 is entered, the left-hand side of the Toast notification box will sit at the halfway point, and so on. Note that the X Position value will be ignored if the Custom position option hasn't been selected.

 

Y Position

Used in conjunction with the Custom position setting, this allows a percentage value to be set for the Y (vertical) axis. The value can be entered manually, or the up and down arrows alongside the property box can be used to increase or decrease the percentage. For example, if 30 is entered for the Y Position value, the top of the Toast notification box will appear 30% down from the top of the screen at form runtime. If 50 is entered, the top of the Toast notification box will sit halfway down, and so on. Note that the Y Position value will be ignored if the Custom position option hasn't been selected.

Advanced Category

Timeout

Sets the length of time (in milliseconds) that the Toast notification box will remain visible on-screen once an event has finished or an action has been completed. A value of 0 will cause the Toast notification to be static once it appears (i.e., it will need to be closed manually using the cross in the upper, right-hand corner of the Toast notification box). The Toast notification box can be stalled by hovering the mouse cursor over it when it appears. As long as the mouse cursor remains over the Toast notification box, the timeout will be ignored and the box will remain in position. As soon as the mouse cursor is moved off the notification box, it will continue its progress through the configured timeout.

 

Show Progress Bar

When selected, this places a progress bar at the bottom of the Toast notification box.

 

Styles Category

Toast Style

This property lets you assign a style to the Toast notification box, e.g., to set the font type, size and colour.

  • When the Toast notification box appears, you can, if you wish, dismiss it before the configured Timeout expires by clicking the cross in the box's upper, right-hand corner.